<template>
  <a-spin dot :loading="isLoading" style="height: calc(100% - 44px)">
    <div class="app-container crm-container">
      <a-breadcrumb style="margin-bottom: 20px">
        <a-breadcrumb-item>合同管理</a-breadcrumb-item>
        <a-breadcrumb-item>{{ label }}</a-breadcrumb-item>
      </a-breadcrumb>
      <micro-app
        v-if="isShowPage"
        class="micro-app"
        name="sales-contract"
        :url="appUrlConfig.salesContract"
        baseroute="/sales-contract"
        :data="baseData"
        fiber
        iframe
        keep-alive
        router-mode="native"
        @mounted="microAppMounted"
        @aftershow="microAppAfterShow"
        @error="onError"
      />
      <ErrorPage v-else :code="500"></ErrorPage>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getToken } from "@/utils/auth";
import { useUserStore } from "@/stores";
import appUrlConfig from "@/config/appUrlconfig";
import ErrorPage from "@/views/error/components/ErrorPage.vue";
import { mainReceiveData } from "@/microApp/utils";

const userStore = useUserStore();
const baseData = ref({
  token: getToken(),
  userInfo: userStore.userInfo,
  roles: userStore.roles
});

const label = ref("");
mainReceiveData("sales-contract", (data: any) => {
  label.value = data?.meta?.title ?? "";
});

const isLoading = ref(true);
const microAppMounted = () => {
  isLoading.value = false;
};

const microAppAfterShow = () => {
  isLoading.value = false;
};

const isShowPage = ref(true);
const onError = () => {
  isShowPage.value = false;
};
</script>

<style scoped lang="scss">
.crm-container {
  height: calc(100% - 40px);
}
.micro-app,
:deep(micro-app-body) {
  height: 100% !important;
  min-height: 100% !important;
}
</style>
